
<template>
    <div style="height:100%;width:100%;position:relative;">
        <div class="pagetop">
            <div class="search-title">
                <table class="table1style">
                    <tr>
                        <td>
                            <div>申请项目</div>
                        </td>
                        <td>
                            <el-input v-model="reqitemcode" v-show="false"></el-input>
                            <el-input v-model="reqitemname" @dblclick.native="PReqItemdialog(1)" placeholder="双击输入条件" readonly clearable @clear="clear(1)"></el-input>
                        </td>
                        <td>
                            <div>标本类型</div>
                        </td>
                        <td>
                            <el-input v-model="specimencode" v-show="false"></el-input>
                            <el-input v-model="specimenname" @dblclick.native="PReqItemdialog(2)" placeholder="双击输入条件" readonly clearable @clear="clear(2)"></el-input>
                        </td>
                        <td>
                            <div>检验工作组</div>
                        </td>
                        <td>
                            <el-input v-model="labgroupid" v-show="false"></el-input>
                            <el-input v-model="labgroupname" @dblclick.native="PReqItemdialog(3)" placeholder="双击输入条件" readonly clearable @clear="clear(3)"></el-input>
                        </td>
                        <td>检验目的</td>
                        <td>
                            <rm-ddl-common @change="qpurposechange" datatype="bactpurpose" dataname="检验目的" v-model="purposeno" width="100%"></rm-ddl-common>
                        </td>
                    </tr>

                </table>
            </div>
            <div class="top-deal">
                <el-button @click="InitPage" icon="el-icon-search" type="primary" v-has="'PINQUERY'" :disabled="changeflag">查询</el-button>
                <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
                <el-button @click="btnDelete" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
                <el-button @click="btnSave" icon="el-icon-document" v-has="'PMODIFY'" :disabled="!changeflag">保存</el-button>
                <el-button @click="btnCancel" icon="el-icon-close" :disabled="!changeflag">取消</el-button>
                <el-button @click="btnExport" icon="el-icon-upload2">导出</el-button>
                <el-button @click="btnClear" icon="el-icon-warning-outline">清除条件</el-button>
                <!-- <el-button @click="btnPrint" icon="el-icon-printer" :disabled="changeflag">打印</el-button> -->
            </div>
        </div>
        <div class="pagecenter">
            <div class="middle-center">
                <vxe-table :data.sync="tableData" :loading="loading" :keyboard-config="keyConfig" :row-class-name="rowClassName" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{trigger: 'dblclick', mode: 'cell',showStatus: true,showIcon:false}" @cell-dblclick="opendialog" @current-change="currentChangeEvent" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row class="mytablestyle" highlight-hover-column ref="xTable" resizable show-header-overflow="tooltip" show-overflow="tooltip" size="mini" stripe>
                    <vxe-table-column type="index" title="NO." width="45" align="center"></vxe-table-column>
                    <vxe-table-column field="req_itemcode" title="申请项目(双击开窗)" width="360">
                        <template v-slot="{row}">
                            <div>{{!row.req_itemname?"":(row.req_itemname+' ['+row.req_itemcode+']'+ ' ￥'+(!row.item_price?"":row.item_price))}}</div>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="specimencode" title="标本类型(双击开窗)" width="200">
                        <template v-slot="{row}">
                            <div>{{!row.specimen_name?"":row.specimen_name+' ['+row.specimencode+']'}}</div>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="labgroupid" title="检验工作组(双击开窗)" width="355">
                        <template v-slot="{row}">
                            <div>{{!row.labgroupname?"": row.labgroupname+' ['+(row.labgroupid=="-1"?"ALL":row.labgroupid)+']'}}</div>
                        </template>
                    </vxe-table-column>
                    <vxe-table-column field="purposeno" title="检验目的(双击开窗)" width="355">
                        <template v-slot="{row}">
                            <div>{{!row.purposename?"": row.purposename}}</div>
                        </template>
                    </vxe-table-column>
                    <!-- <vxe-table-column v-show="false" field="purposelabgroupid" title="检验目的工作组"  >
                        <template  v-slot="{row}">
                            <div>{{row.purposelabgroupid}}</div>
                        </template>
                    </vxe-table-column> -->
                    <vxe-table-column field="seq" title="序号" width="80" align="center" :edit-render="{name:'input', autoselect: true,events: {change: hasChange}}"></vxe-table-column>
                </vxe-table>
            </div>
        </div>
        <!--申请项目-->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择申请项目" :visible.sync="dialogReqItem" width="900px">
            <rm-ReqItem-new @change="reqitemchange" @cancel="dialogReqItem=false;" ref="reqitem"></rm-ReqItem-new>
        </el-dialog>
        <!--标本类型-->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择标本类型" :visible.sync="dialogSpecimen">
            <rm-pop-common @change="specimenchange" @cancel="dialogSpecimen=false;" datatype="specimen" kindno="specimen" irrelevant="specimenShowIrrelevant"></rm-pop-common>
        </el-dialog>
        <!--检验目的-->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择检验目的" :visible.sync="dialogPurpose"  v-if="dialogPurpose">
            <rm-pop-common @change="purposechange" @cancel="dialogPurpose=false;" datatype="bactpurpose" kindno="bactpurpose" irrelevant="purposeShowIrrelevant" :labgroupid="chklabgroupid"></rm-pop-common>
        </el-dialog>
        <!--检验目的 多选-->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择检验目的" :visible.sync="dialogPurposemultiple"  v-if="dialogPurposemultiple">
            <rm-pop-common @change="purposemultiplechange" @cancel="dialogPurposemultiple=false;" :multiple="true" datatype="bactpurpose" kindno="bactpurpose" irrelevant="purposeShowIrrelevant" :labgroupid="chklabgroupid"></rm-pop-common>
        </el-dialog>
        <!--检验工作组-->
        <el-dialog v-el-drag-dialog :append-to-body="true" :close-on-click-modal="false" title="请选择检验工作组" :visible.sync="dialogLabgroup" v-if="dialogLabgroup">
            <rm-pop-common @change="labgroupchange" @cancel="dialogLabgroup=false;" datatype="labgroup" kindno="labgroup" irrelevant="groupShowIrrelevant" :labgroupid="purposelabgroupid" ></rm-pop-common>
        </el-dialog>
    </div>
</template>

<script type="text/javascript">
import XEUtils from "xe-utils";
import XLSX from "xlsx";
import FileSaver from "file-saver";
export default {
    name: "LIS836",
    data() {
        return {
            keyConfig: {
                isDel: true,
                isTab: true,
                isEdit: true,
                isArrow: true,
            },
            keyLocalConfig: {
                isArrow: true,
            },
            selectConfig: { tigger: "row" },
            txtsearch: "",
            tableColumn: [
                { title: "申请项目", field: "req_itemname" },
                { title: "标本类型", field: "specimen_name" },
                { title: "检验目的", field: "purposename" },
                { title: "序号", field: "seq" },
            ],
            tableData: [],
            buttonwidth: 0,
            loading: false,
            changeflag: false,
            isFirstLoading: false,
            curselectrow: "",
            reqitemcode: "",
            reqitemname: "",
            specimencode: "",
            specimenname: "",
            purposeno: "",
            dialogReqItem: false,
            dialogSpecimen: false,
            dialogPurpose: false,
            dialogPurposemultiple:false,
            dialogflag: false,
            validRules: { req_itemcode: [{ required: true, message: "必须填写申请项目" }], specimencode: [{ required: true, message: "必须填写标本类型" }] },
            dialogLabgroup:false,
            labgroupname:"",
            labgroupid:"",
            purposelabgroupid:-1,
            chklabgroupid:-1,
            multiplepurposeno:false,
        };
    },
    created() {
        this.InitPage(); //初始化主列表
        //this.getinitdata(); //初始化下拉框的数据
    },
    mounted() {},
    updated() {},
    methods: {
        clear(index) {
            //清除条件
            if (index == 1) {
                this.dialogReqItem = false;
                this.reqitemcode = "";
                this.reqitemname = "";
                this.InitPage();
            } else if(index == 2) {
                this.dialogSpecimen = false;
                this.specimencode = "";
                this.specimenname = "";
                this.InitPage();
            } else if(index == 3){
                this.dialogLabgroup = false;
                this.labgroupid = "";
                this.labgroupname = "";
                this.InitPage();
            }
        },
        btnClear() {
            //清除所有条件
            this.reqitemcode = "";
            this.reqitemname = "";
            this.specimencode = "";
            this.specimenname = "";
            this.purposeno = "";
            this.labgroupid="",
            this.labgroupname="",
            this.InitPage();
        },
        PReqItemdialog(index) {
            if (index == 1) {
                this.dialogReqItem = true;
            } else if(index==2) {
                this.dialogSpecimen = true;
            }else if(index==3){
                this.dialogLabgroup=true;
            }
            this.dialogflag = true;
        },
        InitPage() {
            this.loading = true;
            this.$tool
                .request({
                    url: "LIS/LIS8/LIS836",
                    method: "post",
                    data: {
                        action: "InitPage",
                        reqitemcode: this.reqitemcode,
                        specimencode: this.specimencode,
                        labgroupid:this.labgroupid,
                        purposeno: this.purposeno,
                    },
                })
                .then((res) => {
                    this.multiplepurposeno = res.multiplepurposeno=='1' ? true : false;
                    this.tableData = res.data;
                    this.isFirstLoading = true;
                    if (res.data.length > 0) {
                        this.$refs.xTable.setCurrentRow(res.data[0]);
                        this.curselectrow = res.data[0];
                    } else {
                        this.$refs.xTable.setCurrentRow(null);
                        this.curselectrow = null;
                    }
                    this.loading = false;
                })
                .catch((err) => {
                    this.loading = false;
                });
        },
        activeMethod({ row }) {
            return true;
        },
        rowClassName({ row, rowIndex }) {
            let isDirty = this.$refs.xTable.hasRowChange(row);
            if (isDirty) {
                return "row-modify";
            }
            if (this.$refs.xTable.hasRowInsert(row)) {
                return "row-new";
            }
        },
        currentChangeEvent({ row }) {
            this.curselectrow = row;
        },
        btnAdd() {
            var seq = this.$refs.xTable.tableData.length;
            var kseq = (seq + 1) * 10;
            let row = {
                req_itemcode: "",
                specimencode: "",
                purposeno: "",
                labgroupid:-1,
                purposelabgroupid:-1,
                seq: kseq,
            };
            this.$refs.xTable.insert(row).then(({ row }) => {
                this.$refs.xTable.setCurrentRow(row);
                this.$refs.xTable.scrollToRow(row);
                this.curselectrow = row;
            });
        },
        btnDelete() {
            this.$confirm("您确定要删除这条数据吗？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    try {
                        this.changeflag = true;
                        var delrow = this.$refs.xTable.getCurrentRow();
                        if (delrow) {
                            var alld = this.$refs.xTable.tableData;
                            var rowindex = alld.indexOf(delrow);
                            this.$refs.xTable.remove(delrow);
                            let havedata = this.$refs.xTable.tableData;
                            if (havedata.length > 0) {
                                if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                                let selectrow = havedata[rowindex];
                                this.$refs.xTable.setCurrentRow(selectrow);
                                this.curselectrow = selectrow;
                            }
                        }
                    } catch (e) {
                        console.log("error", e);
                    }
                })
                .catch(() => {});
        },
        btnSave() {
            this.$refs.xTable.validate((valid) => {
                if (valid) {
                    this.savedata();
                } else {
                    this.$alert("必须填写申请项目和标本类型！");
                }
            });
        },
        async savedata() {
            let date = this.$refs.xTable.tableData;
            date.sort((a, b) => {
                return a.seq - b.seq;
            });
            for (let i = 0, len = date.length; i < len; i++) {
                let tempseq = (i + 1) * 10;
                if (tempseq !== date[i].seq) {
                    date[i].seq = tempseq;
                }
            }
            let xTableData = this.$refs.xTable.getRecordset();
            try {
                const res = await this.$tool.request({
                    url: "LIS/LIS8/LIS836",
                    method: "post",
                    data: {
                        action: "savedata",
                        urec: xTableData,
                    },
                });
                if (res.errcode == "1") {
                    this.$message.success("操作成功！");
                    this.changeflag = false;
                    this.InitPage();
                } else {
                    this.$message.error("操作失败！" + res.errmsg);
                }
            } catch (e) {
                this.$alert(e);
            }
        },
        btnExport() {
            this.$refs.xTable.exportCsv({ filename: "LIS836 申请项目对照检验目的" });
            // return false;
            // let data = this.getExportData();
            // let book = XLSX.utils.book_new();
            // let sheet = XLSX.utils.json_to_sheet(data, { skipHeader: true });
            // XLSX.utils.book_append_sheet(book, sheet);
            // let wbout = XLSX.write(book, { bookType: "xlsx", bookSST: false, type: "binary" });
            // let blob = new Blob([this.toBuffer(wbout)], { type: "application/octet-stream" });
            // // 保存导出
            // FileSaver.saveAs(blob, "申请项目对照检验目的.xlsx");
        },
        // getExportData() {
        //     let datas = this.tableData;
        //     let columns = this.tableColumn.filter(item => item.field);
        //     let headers = [columns.map(item => item.title)];
        //     return headers.concat(
        //         datas.map(row => {
        //             return columns.map(column => {
        //                 return row[column.field];
        //             });
        //         })
        //     );
        // },
        // toBuffer(wbout) {
        //     let buf = new ArrayBuffer(wbout.length);
        //     let view = new Uint8Array(buf);
        //     for (let index = 0; index !== wbout.length; ++index) view[index] = wbout.charCodeAt(index) & 0xff;
        //     return buf;
        // },
        async getData() {
            //统计
            try {
                const res = await this.$tool.request({
                    url: "LIS/LIS8/LIS836",
                    method: "post",
                    data: {
                        action: "getExportData",
                    },
                });
                return res.data;
            } catch (e) {
                this.$alert(e);
            }
        },
        btnCancel() {
            this.$confirm("您确定要取消这次改动吗？", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(() => {
                    this.isFirstLoading = true;
                    this.changeflag = false;
                    this.InitPage();
                })
                .catch(() => {});
        },
        btnPrint() {},
        hasChange() {
            this.changeflag = true;
        },
        specimenchange(code, name) {
            if (this.dialogflag) {
                //如果是查询的标本类型弹窗
                this.specimencode = code;
                this.specimenname = name;
                this.dialogSpecimen = false;
                this.dialogflag = false;
                this.InitPage();
            } else {
                //标识表格标本类型弹窗
                if (!!this.curselectrow) {
                    this.curselectrow.specimencode = code;
                    this.curselectrow.specimen_name = name;
                }
                this.dialogSpecimen = false;
                this.$refs.xTable.updateListenter();
                this.hasChange();
            }
        },
        reqitemchange(code, name, row) {
            if (this.dialogflag) {
                //如果是查询的申请项目弹窗
                this.reqitemcode = code;
                this.reqitemname = name;
                this.dialogflag = false;
                this.dialogReqItem = false;
                this.$refs.reqitem.updateListenter();
                this.InitPage();
            } else {
                //标识表格申请项目弹窗
                if (!!this.curselectrow) {
                    this.curselectrow.req_itemcode = code;
                    this.curselectrow.req_itemname = name;
                    this.curselectrow.item_price = row.item_price;
                }
                this.dialogReqItem = false;
                this.$refs.xTable.updateListenter();
                this.hasChange();
            }
        },
        labgroupchange(code, name) {
            if (this.dialogflag) {
                //如果是查询的检验工作组类型弹窗
                 this.labgroupid = code;
                 this.labgroupname = name;
                 this.dialogLabgroup = false;
                 this.dialogflag = false;
                 this.InitPage();
            } else {
                //标识表格检验工作组类型弹窗
                if (!!this.curselectrow) {
                    this.curselectrow.labgroupid = code;
                    this.curselectrow.labgroupname = name;
                }
                this.dialogLabgroup = false;
                this.$refs.xTable.updateListenter();
                this.hasChange();
            }
        },
        purposechange(code, name,row) {
            console.log("purposechange的row",row);
            if (!!this.curselectrow) {
                this.curselectrow.purposeno = code;
                this.curselectrow.purposename = name + "["+code+"]";
            }
            this.dialogPurpose = false;
            this.$refs.xTable.updateListenter();
            this.hasChange();
        },
        purposemultiplechange(data) {
            console.log("purposechange的data",data);
            let codes = "";
            let names = "";
            data.forEach((item) => {
                if (codes == "") codes = item.hidkey;
                else codes += "," + item.hidkey;
                if(names == "") names =   item.hidname +"["+item.hidkey+"]";
                else names +="," + item.hidname +"["+item.hidkey+"]";
            });
            if (!!this.curselectrow) {
                this.curselectrow.purposeno = codes;
                this.curselectrow.purposename = names;
            }
            this.dialogPurposemultiple = false;
            this.$refs.xTable.updateListenter();
            this.hasChange();
        },
        qspecimenchange(code, name) {
            this.specimencode = code;
            this.InitPage();
        },
        qreqitemchange(code, name) {
            this.reqitemcode = code;
            this.InitPage();
        },
        qpurposechange(code, name) {
            this.purposeno = code;
            this.InitPage();
        },
        opendialog({ row, column }) {
            
            
            if (column.property == "req_itemcode") {
                this.dialogReqItem = true;
            }
            if (column.property == "specimencode") {
                this.dialogSpecimen = true;
            }
            if (column.property == "purposeno") {
                this.chklabgroupid=parseInt(row.labgroupid) ;
                if(this.multiplepurposeno){
                    this.dialogPurposemultiple = true;//多选
                }else{
                    this.dialogPurpose = true;
                }
                
            }
            if (column.property == "labgroupid") {
                this.purposelabgroupid=row.purposelabgroupid;
                this.dialogLabgroup = true;
            }
        },
    },
};
</Script>

<style scoped>
.pagetop {
    width: 100%;
    height: 65px;
    display: -webkit-box;
    -webkit-box-pack: left;
    -webkit-box-align: center;
    border: 1px solid #ccc;
    position: absolute;
    z-index: 99;
}

.pagecenter {
    position: absolute;
    top: 70px;
    width: 100%;
    left: 0;
    bottom: 0px;
    overflow: auto;
}

.middle-center {
    position: absolute;
    height: 100%;
    left: 0px;
    right: 0px;
    overflow: auto;
}

.table1style tr td {
    padding: 0px 2px 0px 2px;
}

/deep/ .el-button.is-disabled {
    border: 0px;
    color: grey;
    background-color: #e6e6e6;
    font-weight: normal;
}
.search-title {
    margin: 0 5px 0 20px;
    font-size: 12px;
    top: 5px;
    position: absolute;
}
.top-deal {
    right: 5px;
    position: absolute;
    top: 36px;
    display: flex;
    align-items: center;
}
/deep/ tr.vxe-body--row.row-modify {
    color: blue;
}
/deep/ tr.vxe-body--row.row-new {
    color: #cc6600;
}
.pagecenter/deep/.mytablestyle tr td div .el-input__inner {
    /* border: 1px solid rgba(255, 254, 254, 0) !important;
    background-color: rgba(255, 254, 254, 0) !important;*/
}
</style>